<template>
	<el-table
		:default-expand-all="true"
		v-loading="dataListLoading"
		:data="dataList"
		row-key="id"
		class="left-tree"
		:cell-style="{ borderColor: '#00000000' }"
		:header-cell-style="{ borderColor: '#00000000' }"
		@row-click="fnDictId"
	>
		<el-table-column prop="name" :label="title" header-align="left" align="left"></el-table-column>

		<el-table-column label="操作" fixed="right" header-align="right" align="right" :render-header="addLeftView">
			<template #default="scope">
				<div class="operation_show">
					<el-button v-auth="'module:role:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
					<el-button v-auth="'module:role:delete'" type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
				</div>
			</template>
		</el-table-column>
	</el-table>

	<!-- 弹窗, 新增 / 修改 -->
	<add-or-update ref="addOrUpdateRef" @refreshDataList="findLeftTree" :title="title" :label="label"></add-or-update>
</template>

<style lang="scss" scoped>
.left-tree > ::before {
	height: 0px;
}

.operation_show {
	display: none;
}

.el-table__body tr:hover > td .operation_show {
	display: block;
}
</style>

<script setup lang="ts">
import { ref, reactive, h } from 'vue'
import { useCrud } from '@/hooks'
import { IHooksOptions } from '@/hooks/interface'
import { findListByDictId } from '@/api/nb/business/dictionaries_subset'
import AddOrUpdate from './dict-r-l-a-o-update.vue'

const state: IHooksOptions = reactive({
	deleteUrl: '/nb/business/dictionaries_subset/delete'
})

const emit = defineEmits(['update:modelValue'])
const props = defineProps(['code', 'title', 'label', 'modelValue'])

const dataListLoading = ref(false)
const dataList = ref()

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

//处理 roleId 属性
const fnDictId = (row: any) => {
	emit('update:modelValue', row.id)
}

//角色添加按键
const addLeftView = () => {
	return h(
		'div',
		{},
		h(
			'svg',
			{ width: '15px', height: '15px' },
			h('use', {
				href: '#icon-setting',
				onClick: () => {
					addOrUpdateHandle()
				}
			})
		)
	)
}

// 刷新 左侧列表
const findLeftTree = () => {
	findListByDictId({ params: { code: props.code } }).then(res => {
		dataList.value = res.data
		if (res.data.length > 0) {
			emit('update:modelValue', res.data[0].id)
		}
	})
}

findLeftTree()

defineExpose({
	// imgUrl
})

const { deleteBatchHandle } = useCrud(state)
</script>

<style scoped></style>
